import React from 'react'
import request from '../../utils/request'
import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile'
import { getCurrCity } from '../../utils/map'
import './index.scss'

import nav1 from '../../assets/images/nav-1.png'
import nav2 from '../../assets/images/nav-2.png'
import nav3 from '../../assets/images/nav-3.png'
import nav4 from '../../assets/images/nav-4.png'
const menus = [
  { name: '整租', imgSrc: nav1, path: '/frame/find?type=1' },
  { name: '合租', imgSrc: nav2, path: '/frame/find?type=2' },
  { name: '地图找房', imgSrc: nav3, path: '/map' },
  { name: '去出租', imgSrc: nav4, path: '/rent/add' }
]

export default class Home extends React.Component {

  state = {
    swiperList: [],
    groupList: [],
    newsList: [],
    imgHeight: 212,
    curCityName: '',
    curCityValue: '',
    swiperLoaded: false
  }

  componentDidMount () {
    // 获取当前城市
    getCurrCity().then(city => {
      this.setState({ curCityName: city.label })
      this.setState({ curCityValue: city.value })
      this.getSwiperData()
      this.getGroupData()
      this.getNewsData()
    })
  }

  async getSwiperData () {
    const { data } = await request.get('/home/swiper')
    this.setState({ swiperList: data.body, swiperLoaded: true })
  }

  async getGroupData () {
    const { data } = await request.get('/home/groups?area='+this.state.curCityValue)
    this.setState({ groupList: data.body })
  }

  async getNewsData () {
    const { data } = await request.get('/home/news?area='+this.state.curCityValue)
    this.setState({ newsList: data.body })
  }

  renderSwiper () {
    return <Carousel
      autoplay={true}
      infinite
      style={{ touchAction: 'none', height: this.state.imgHeight }}
    >
      {this.state.swiperList.map(val => (
        <a
          key={val.id}
          href="http://www.alipay.com"
          style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
        >
          <img
            src={request.defaults.baseURL + val.imgSrc}
            alt=""
            style={{ width: '100%', verticalAlign: 'top' }}
            onLoad={() => {
              // fire window resize event to change height
              window.dispatchEvent(new Event('resize'));
              this.setState({ imgHeight: 'auto' });
            }}
          />
        </a>
      ))}
    </Carousel>
  }

  renderNavBar () {
    return (<Flex className="navbar">
      {menus.map(val => {
        return <Flex.Item key={val.name} onClick={() => this.props.history.push(val.path)}>
          <img src={val.imgSrc} alt="" />
          <p>{val.name}</p>
        </Flex.Item>
      })}
    </Flex>)
  }

  renderGroup () {
    return (
      <div className="groups">
        <Flex className="groups-title" justify="between">
          <h3>租房小组</h3>
          <span>更多</span>
        </Flex>
        <Grid data={this.state.groupList} hasLine={false} square={false} columnNum={2} renderItem={item => {
          return <Flex className="grid-item" justify="between">
            <div className="desc">
              <h3>{item.title}</h3>
              <p>{item.desc}</p>
            </div>
            <img src={request.defaults.baseURL + item.imgSrc} alt="" />
          </Flex>
        }} />
      </div>
    )
  }

  renderNews () {
    return <div className="news">
      <h3 className="group-title">最新资讯</h3>
      <WingBlank size="md">
        {this.state.newsList.map(item => (
          <div className="news-item" key={item.id}>
            <div className="imgwrap">
              <img
                className="img"
                src={request.defaults.baseURL + item.imgSrc}
                alt=""
              />
            </div>
            <Flex className="content" direction="column" justify="between">
              <h3 className="title">{item.title}</h3>
              <Flex className="info" justify="between">
                <span>{item.from}</span>
                <span>{item.date}</span>
              </Flex>
            </Flex>
          </div>
        ))}
      </WingBlank>
    </div>
  }

  render () {
    return (<div className="zf-home">
      <Flex className="search-box">
        <Flex className="search-left">
          <div
            className="location"
            onClick={() => this.props.history.push('/city')}
          >
            <span>{this.state.curCityName}</span>
            <i className="iconfont icon-arrow" />
          </div>
          <div
            className="search-form"
            onClick={() => this.props.history.push('/search')}
          >
            <i className="iconfont icon-seach" />
            <span>请输入小区或地址</span>
          </div>
        </Flex>
        <i
          className="iconfont icon-map"
          onClick={() => this.props.history.push('/map')}
        />
      </Flex>
      <div style={{ height: this.state.imgHeight }}>
        {this.state.swiperLoaded && this.renderSwiper()}
      </div>
      {this.renderNavBar()}
      {this.renderGroup()}
      {this.renderNews()}
    </div>)
  }
}